<template>
  <div>
    <my-header></my-header>
    <!-- 城市版婚礼纪首页开始 -->
    <div class="index_city">
      <!-- header部分 -->
      <div class="index_city_header w">
        <div class="nav_list">
          <a href="#"
            ><img src="img/wlh/index_city/nav-1.png" alt="" /><span
              >婚宴酒店</span
            ></a
          >
          <a href="#"
            ><img src="img/wlh/index_city/nav-2.png" alt="" /><span
              >婚纱摄影</span
            ></a
          >
          <a href="#"
            ><img src="img/wlh/index_city/nav-3.png" alt="" /><span
              >婚礼策划</span
            ></a
          >
          <a href="#"
            ><img src="img/wlh/index_city/nav-4.png" alt="" /><span
              >司仪主持</span
            ></a
          >
          <a href="#"
            ><img src="img/wlh/index_city/nav-5.png" alt="" /><span
              >新娘跟妆</span
            ></a
          >
          <a href="#"
            ><img src="img/wlh/index_city/nav-6.png" alt="" /><span
              >婚礼摄影</span
            ></a
          >
          <a href="#"
            ><img src="img/wlh/index_city/nav-7.png" alt="" /><span
              >婚礼跟拍</span
            ></a
          >
          <a href="#"
            ><img src="img/wlh/index_city/nav-8.png" alt="" /><span
              >婚纱礼服</span
            ></a
          >
          <a href="#"
            ><img src="img/wlh/index_city/nav-9.png" alt="" /><span
              >婚戒首饰</span
            ></a
          >
          <a href="#"
            ><img src="img/wlh/index_city/nav-10.png" alt="" /><span
              >婚车租赁</span
            ></a
          >
        </div>
        <div class="content_center">
          <!-- 轮播图 -->
          <div class="slide">
            <!-- 轮播图片 -->
            <ul>
              <li class="slide_item">
                <a href="#"
                  ><img
                    src="https://qnm.hunliji.com/o_1eio97dso1gdl1j8ii5ehuqk099.jpg"
                    alt=""
                /></a>
              </li>
              <li class="slide_item">
                <a href="#"
                  ><img
                    src="https://qnm.hunliji.com/o_1eio996ffha81thsc8h1qm7j3v9.png"
                    alt=""
                /></a>
              </li>
              <!--注意！最后li个数要比实际图片张数多1，最后一个li里的img是重复第一张li的图片-->
              <li class="slide_item">
                <a href="#"
                  ><img
                    src="https://qnm.hunliji.com/o_1eio97dso1gdl1j8ii5ehuqk099.jpg"
                    alt=""
                /></a>
              </li>
            </ul>
            <!-- 轮播图的两个耳朵 -->
            <div class="left_ear ear">
              <div class="arrow_left"></div>
            </div>
            <div class="right_ear ear">
              <div class="arrow_right"></div>
            </div>
            <!-- 轮播图的下边指示器 -->
            <ul class="indicator">
              <li class="li_active"></li>
              <li></li>
            </ul>
          </div>
          <div class="poster">
            <a href="#"
              ><img
                src="https://qnm.hunliji.com/o_1eio9b4kp1k8isfmja2ctc10gf9.jpg"
                alt=""
            /></a>
            <a href="#"
              ><img
                src="https://qnm.hunliji.com/o_1eio9ch6djr4121kp5n1fqc7ln9.jpg"
                alt=""
            /></a>
            <a href="#"
              ><img
                src="https://qnm.hunliji.com/o_1eio9e2b91fhg3sqg59i7dieh9.jpg"
                alt=""
            /></a>
          </div>
        </div>
        <div class="content_right">
          <h3 class="h3_title">备婚工具</h3>
          <div class="tool_list">
            <a href="#" class="tool_item">
              <img src="img/wlh/index_city/tool-1.png" alt="" />
              <span class="tool_title">电子请帖</span>
            </a>
            <a href="#" class="tool_item">
              <img src="img/wlh/index_city/tool-2.png" alt="" />
              <span class="tool_title">结婚吉日</span>
            </a>
            <a href="#" class="tool_item">
              <img src="img/wlh/index_city/tool-3.png" alt="" />
              <span class="tool_title">结婚登记处</span>
            </a>
            <a href="#" class="tool_item">
              <img src="img/wlh/index_city/tool-4.png" alt="" />
              <span class="tool_title">婚礼mv</span>
            </a>
            <a href="#" class="tool_item">
              <img src="img/wlh/index_city/tool-5.png" alt="" />
              <span class="tool_title">现场互动</span>
            </a>
            <a href="#" class="tool_item">
              <img src="img/wlh/index_city/tool-6.png" alt="" />
              <span class="tool_title">一件试婚纱</span>
            </a>
          </div>
          <div class="download_btn">23款实用备婚工具，立即下载体验</div>
          <div class="down_code">
            <img src="img/wlh/erweima.png" alt="" />
          </div>
          <h3 class="h3_title">结婚专题</h3>
          <div class="subject_list">
            <a href="#" class="subject_item">
              <span>结婚登记</span><img src="img/wlh/index_city/h.png" alt="" />
            </a>
          </div>
        </div>
      </div>
      <!-- 婚庆头条 -->
      <div class="content_news w">
        <div class="card_header">
          <div class="card_header_left">
            <h2 class="title_h2">{{ city_name }}婚庆头条</h2>
            <div class="tag_list">
              <a href="#">拍婚纱照攻略</a>
              <a href="#">婚礼现场筹备</a>
              <a href="#">本地结婚习俗</a>
            </div>
          </div>
          <a href="#" class="a_more">更多</a>
        </div>
        <div class="news_list">
          <div class="news_item">
            <a href="#" class="news_cover">
              <div>
                <img
                  src="https://qnm.hunliji.com/o_1dfdish56rso49d1fogkv3u4d9.jpg?imageView2/1/w/438/h/272"
                  alt=""
                />
              </div>
            </a>
            <a href="#" target="_blank">{{ city_name }}人结婚要彩礼吗?</a>
            <p class="news_date">2021-02-20</p>
          </div>
          <div class="news_item">
            <a href="#" class="news_cover">
              <div>
                <img
                  src="https://qnm.hunliji.com/o_1dfdish56rso49d1fogkv3u4d9.jpg?imageView2/1/w/438/h/272"
                  alt=""
                />
              </div>
            </a>
            <a href="#" target="_blank">{{ city_name }}人结婚要彩礼吗?</a>
            <p class="news_date">2021-02-20</p>
          </div>
          <div class="news_item">
            <a href="#" class="news_cover">
              <div>
                <img
                  src="https://qnm.hunliji.com/o_1dfdish56rso49d1fogkv3u4d9.jpg?imageView2/1/w/438/h/272"
                  alt=""
                />
              </div>
            </a>
            <a href="#" target="_blank">{{ city_name }}人结婚要彩礼吗?</a>
            <p class="news_date">2021-02-20</p>
          </div>
          <div class="news_item">
            <a href="#" class="news_cover">
              <div>
                <img
                  src="https://qnm.hunliji.com/o_1dfdish56rso49d1fogkv3u4d9.jpg?imageView2/1/w/438/h/272"
                  alt=""
                />
              </div>
            </a>
            <a href="#" target="_blank">{{ city_name }}人结婚要彩礼吗?</a>
            <p class="news_date">2021-02-20</p>
          </div>
          <div class="news_item">
            <a href="#" class="news_cover">
              <div>
                <img
                  src="https://qnm.hunliji.com/o_1dfdish56rso49d1fogkv3u4d9.jpg?imageView2/1/w/438/h/272"
                  alt=""
                />
              </div>
            </a>
            <a href="#" target="_blank">{{ city_name }}人结婚要彩礼吗?</a>
            <p class="news_date">2021-02-20</p>
          </div>
        </div>
      </div>
      <!-- 摄影商家和婚庆公司双胞胎 -->
      <div class="merchant_list_double w">
        <div class="photo_shop">
          <!-- 头部是复制粘贴过来的结构 -->
          <div class="card_header">
            <div class="card_header_left">
              <h2 class="title_h2">{{ city_name }}婚纱摄影商家</h2>
              <div class="tag_list">
                <a href="#">摄影报价</a>
                <a href="#">样照客片</a>
                <a href="#">旅拍婚纱摄影</a>
              </div>
            </div>
            <a href="#" class="a_more">更多</a>
          </div>
          <div class="merchant_list">
            <div class="merchant_item">
              <a href="#" class="merchant_cover">
                <div>
                  <img
                    src="https://qnm.hunliji.com/415FAE86437072C3B650D7C314200B19.jpg?imageView2/1/w/348/h/216"
                    alt=""
                  />
                </div>
              </a>
              <div class="merchant_title_box">
                <i class="merchant_type"></i>
                <h2 class="merchant_title">
                  <a href="#">伯爵婚纱摄影摄影摄影不许换行</a>
                </h2>
                <div class="merchant_comment_box">
                  <span class="comment_stars">
                    <ul>
                      <li></li>
                      <li></li>
                      <li></li>
                      <li></li>
                      <li></li>
                    </ul>
                  </span>
                  <span class="comment_num">1118</span>条
                </div>
                <div class="merchant_price">
                  ￥<span class="merchant_price_num">6999</span>起
                </div>
              </div>
            </div>
            <div class="merchant_item">
              <a href="#" class="merchant_cover">
                <div>
                  <img
                    src="https://qnm.hunliji.com/415FAE86437072C3B650D7C314200B19.jpg?imageView2/1/w/348/h/216"
                    alt=""
                  />
                </div>
              </a>
              <div class="merchant_title_box">
                <i class="merchant_type"></i>
                <h2 class="merchant_title">
                  <a href="#">伯爵婚纱摄影摄影摄影不许换行</a>
                </h2>
                <div class="merchant_comment_box">
                  <span class="comment_stars">
                    <ul>
                      <li></li>
                      <li></li>
                      <li></li>
                      <li></li>
                      <li></li>
                    </ul>
                  </span>
                  <span class="comment_num">1118</span>条
                </div>
                <div class="merchant_price">
                  ￥<span class="merchant_price_num">6999</span>起
                </div>
              </div>
            </div>
            <div class="merchant_item">
              <a href="#" class="merchant_cover">
                <div>
                  <img
                    src="https://qnm.hunliji.com/415FAE86437072C3B650D7C314200B19.jpg?imageView2/1/w/348/h/216"
                    alt=""
                  />
                </div>
              </a>
              <div class="merchant_title_box">
                <i class="merchant_type"></i>
                <h2 class="merchant_title">
                  <a href="#">伯爵婚纱摄影摄影摄影不许换行</a>
                </h2>
                <div class="merchant_comment_box">
                  <span class="comment_stars">
                    <ul>
                      <li></li>
                      <li></li>
                      <li></li>
                      <li></li>
                      <li></li>
                    </ul>
                  </span>
                  <span class="comment_num">1118</span>条
                </div>
                <div class="merchant_price">
                  ￥<span class="merchant_price_num">6999</span>起
                </div>
              </div>
            </div>
            <div class="merchant_item">
              <a href="#" class="merchant_cover">
                <div>
                  <img
                    src="https://qnm.hunliji.com/415FAE86437072C3B650D7C314200B19.jpg?imageView2/1/w/348/h/216"
                    alt=""
                  />
                </div>
              </a>
              <div class="merchant_title_box">
                <i class="merchant_type"></i>
                <h2 class="merchant_title">
                  <a href="#">伯爵婚纱摄影摄影摄影不许换行</a>
                </h2>
                <div class="merchant_comment_box">
                  <span class="comment_stars">
                    <ul>
                      <li></li>
                      <li></li>
                      <li></li>
                      <li></li>
                      <li></li>
                    </ul>
                  </span>
                  <span class="comment_num">1118</span>条
                </div>
                <div class="merchant_price">
                  ￥<span class="merchant_price_num">6999</span>起
                </div>
              </div>
            </div>
            <div class="merchant_item">
              <a href="#" class="merchant_cover">
                <div>
                  <img
                    src="https://qnm.hunliji.com/415FAE86437072C3B650D7C314200B19.jpg?imageView2/1/w/348/h/216"
                    alt=""
                  />
                </div>
              </a>
              <div class="merchant_title_box">
                <i class="merchant_type"></i>
                <h2 class="merchant_title">
                  <a href="#">伯爵婚纱摄影摄影摄影不许换行</a>
                </h2>
                <div class="merchant_comment_box">
                  <span class="comment_stars">
                    <ul>
                      <li></li>
                      <li></li>
                      <li></li>
                      <li></li>
                      <li></li>
                    </ul>
                  </span>
                  <span class="comment_num">1118</span>条
                </div>
                <div class="merchant_price">
                  ￥<span class="merchant_price_num">6999</span>起
                </div>
              </div>
            </div>
            <div class="merchant_item">
              <a href="#" class="merchant_cover">
                <div>
                  <img
                    src="https://qnm.hunliji.com/415FAE86437072C3B650D7C314200B19.jpg?imageView2/1/w/348/h/216"
                    alt=""
                  />
                </div>
              </a>
              <div class="merchant_title_box">
                <i class="merchant_type"></i>
                <h2 class="merchant_title">
                  <a href="#">伯爵婚纱摄影摄影摄影不许换行</a>
                </h2>
                <div class="merchant_comment_box">
                  <span class="comment_stars">
                    <ul>
                      <li></li>
                      <li></li>
                      <li></li>
                      <li></li>
                      <li></li>
                    </ul>
                  </span>
                  <span class="comment_num">1118</span>条
                </div>
                <div class="merchant_price">
                  ￥<span class="merchant_price_num">6999</span>起
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="wedding_shop">
          <!-- 头部是复制粘贴过来的结构 -->
          <div class="card_header">
            <div class="card_header_left">
              <h2 class="title_h2">{{ city_name }}婚庆公司</h2>
              <div class="tag_list">
                <a href="#">婚庆价目</a>
                <a href="#">效果图</a>
              </div>
            </div>
            <a href="#" class="a_more">更多</a>
          </div>
          <div class="merchant_list">
            <div class="merchant_item">
              <a href="#" class="merchant_cover">
                <div>
                  <img
                    src="https://qnm.hunliji.com/415FAE86437072C3B650D7C314200B19.jpg?imageView2/1/w/348/h/216"
                    alt=""
                  />
                </div>
              </a>
              <div class="merchant_title_box">
                <i class="merchant_type"></i>
                <h2 class="merchant_title">
                  <a href="#">伯爵婚纱摄影摄影摄影不许换行</a>
                </h2>
                <div class="merchant_comment_box">
                  <span class="comment_stars">
                    <ul>
                      <li></li>
                      <li></li>
                      <li></li>
                      <li></li>
                      <li></li>
                    </ul>
                  </span>
                  <span class="comment_num">1118</span>条
                </div>
                <div class="merchant_price">
                  ￥<span class="merchant_price_num">6999</span>起
                </div>
              </div>
            </div>
            <div class="merchant_item">
              <a href="#" class="merchant_cover">
                <div>
                  <img
                    src="https://qnm.hunliji.com/415FAE86437072C3B650D7C314200B19.jpg?imageView2/1/w/348/h/216"
                    alt=""
                  />
                </div>
              </a>
              <div class="merchant_title_box">
                <i class="merchant_type"></i>
                <h2 class="merchant_title">
                  <a href="#">伯爵婚纱摄影摄影摄影不许换行</a>
                </h2>
                <div class="merchant_comment_box">
                  <span class="comment_stars">
                    <ul>
                      <li></li>
                      <li></li>
                      <li></li>
                      <li></li>
                      <li></li>
                    </ul>
                  </span>
                  <span class="comment_num">1118</span>条
                </div>
                <div class="merchant_price">
                  ￥<span class="merchant_price_num">6999</span>起
                </div>
              </div>
            </div>
            <div class="merchant_item">
              <a href="#" class="merchant_cover">
                <div>
                  <img
                    src="https://qnm.hunliji.com/415FAE86437072C3B650D7C314200B19.jpg?imageView2/1/w/348/h/216"
                    alt=""
                  />
                </div>
              </a>
              <div class="merchant_title_box">
                <i class="merchant_type"></i>
                <h2 class="merchant_title">
                  <a href="#">伯爵婚纱摄影摄影摄影不许换行</a>
                </h2>
                <div class="merchant_comment_box">
                  <span class="comment_stars">
                    <ul>
                      <li></li>
                      <li></li>
                      <li></li>
                      <li></li>
                      <li></li>
                    </ul>
                  </span>
                  <span class="comment_num">1118</span>条
                </div>
                <div class="merchant_price">
                  ￥<span class="merchant_price_num">6999</span>起
                </div>
              </div>
            </div>
            <div class="merchant_item">
              <a href="#" class="merchant_cover">
                <div>
                  <img
                    src="https://qnm.hunliji.com/415FAE86437072C3B650D7C314200B19.jpg?imageView2/1/w/348/h/216"
                    alt=""
                  />
                </div>
              </a>
              <div class="merchant_title_box">
                <i class="merchant_type"></i>
                <h2 class="merchant_title">
                  <a href="#">伯爵婚纱摄影摄影摄影不许换行</a>
                </h2>
                <div class="merchant_comment_box">
                  <span class="comment_stars">
                    <ul>
                      <li></li>
                      <li></li>
                      <li></li>
                      <li></li>
                      <li></li>
                    </ul>
                  </span>
                  <span class="comment_num">1118</span>条
                </div>
                <div class="merchant_price">
                  ￥<span class="merchant_price_num">6999</span>起
                </div>
              </div>
            </div>
            <div class="merchant_item">
              <a href="#" class="merchant_cover">
                <div>
                  <img
                    src="https://qnm.hunliji.com/415FAE86437072C3B650D7C314200B19.jpg?imageView2/1/w/348/h/216"
                    alt=""
                  />
                </div>
              </a>
              <div class="merchant_title_box">
                <i class="merchant_type"></i>
                <h2 class="merchant_title">
                  <a href="#">伯爵婚纱摄影摄影摄影不许换行</a>
                </h2>
                <div class="merchant_comment_box">
                  <span class="comment_stars">
                    <ul>
                      <li></li>
                      <li></li>
                      <li></li>
                      <li></li>
                      <li></li>
                    </ul>
                  </span>
                  <span class="comment_num">1118</span>条
                </div>
                <div class="merchant_price">
                  ￥<span class="merchant_price_num">6999</span>起
                </div>
              </div>
            </div>
            <div class="merchant_item">
              <a href="#" class="merchant_cover">
                <div>
                  <img
                    src="https://qnm.hunliji.com/415FAE86437072C3B650D7C314200B19.jpg?imageView2/1/w/348/h/216"
                    alt=""
                  />
                </div>
              </a>
              <div class="merchant_title_box">
                <i class="merchant_type"></i>
                <h2 class="merchant_title">
                  <a href="#">伯爵婚纱摄影摄影摄影不许换行</a>
                </h2>
                <div class="merchant_comment_box">
                  <span class="comment_stars">
                    <ul>
                      <li></li>
                      <li></li>
                      <li></li>
                      <li></li>
                      <li></li>
                    </ul>
                  </span>
                  <span class="comment_num">1118</span>条
                </div>
                <div class="merchant_price">
                  ￥<span class="merchant_price_num">6999</span>起
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- 婚宴酒店模块 -->
      <div class="home_content w">
        <!-- 头部是复制粘贴过来的结构 -->
        <div class="card_header">
          <div class="card_header_left">
            <h2 class="title_h2">{{ city_name }}婚宴酒店</h2>
          </div>
          <a href="#" class="a_more">更多</a>
        </div>
        <!-- 酒店列表项 -->
        <div class="hotel_list">
          <div class="hotel_item">
            <a href="#" class="pic">
              <div>
                <img
                  src="https://qnm.hunliji.com/o_1d15691mubo41mqu1uif1vul1dnun.jpg?imageView2/1/w/438/h/272"
                  alt=""
                />
              </div>
              <div class="flex_zhuo">1-35桌</div>
            </a>
            <a href="#" class="store">格乐利雅婚礼艺术中心(徐汇店)</a>
            <div class="hotel_comment_box">
              <span class="hotel_comment_count">
                <span class="score">4.9分</span>
                <span>·20条点评</span>
              </span>
              <span class="hotel_kind">婚礼堂</span>
            </div>
            <div class="hotel_price">￥7980/桌起</div>
          </div>
          <div class="hotel_item">
            <a href="#" class="pic">
              <div>
                <img
                  src="https://qnm.hunliji.com/o_1d15691mubo41mqu1uif1vul1dnun.jpg?imageView2/1/w/438/h/272"
                  alt=""
                />
              </div>
              <div class="flex_zhuo">1-35桌</div>
            </a>
            <a href="#" class="store">格乐利雅婚礼艺术中心(徐汇店)</a>
            <div class="hotel_comment_box">
              <span class="hotel_comment_count">
                <span class="score">4.9分</span>
                <span>·20条点评</span>
              </span>
              <span class="hotel_kind">婚礼堂</span>
            </div>
            <div class="hotel_price">￥7980/桌起</div>
          </div>
          <div class="hotel_item">
            <a href="#" class="pic">
              <div>
                <img
                  src="https://qnm.hunliji.com/o_1d15691mubo41mqu1uif1vul1dnun.jpg?imageView2/1/w/438/h/272"
                  alt=""
                />
              </div>
              <div class="flex_zhuo">1-35桌</div>
            </a>
            <a href="#" class="store">格乐利雅婚礼艺术中心(徐汇店)</a>
            <div class="hotel_comment_box">
              <span class="hotel_comment_count">
                <span class="score">4.9分</span>
                <span>·20条点评</span>
              </span>
              <span class="hotel_kind">婚礼堂</span>
            </div>
            <div class="hotel_price">￥7980/桌起</div>
          </div>
          <div class="hotel_item">
            <a href="#" class="pic">
              <div>
                <img
                  src="https://qnm.hunliji.com/o_1d15691mubo41mqu1uif1vul1dnun.jpg?imageView2/1/w/438/h/272"
                  alt=""
                />
              </div>
              <div class="flex_zhuo">1-35桌</div>
            </a>
            <a href="#" class="store">格乐利雅婚礼艺术中心(徐汇店)</a>
            <div class="hotel_comment_box">
              <span class="hotel_comment_count">
                <span class="score">4.9分</span>
                <span>·20条点评</span>
              </span>
              <span class="hotel_kind">婚礼堂</span>
            </div>
            <div class="hotel_price">￥7980/桌起</div>
          </div>
          <div class="hotel_item">
            <a href="#" class="pic">
              <div>
                <img
                  src="https://qnm.hunliji.com/o_1d15691mubo41mqu1uif1vul1dnun.jpg?imageView2/1/w/438/h/272"
                  alt=""
                />
              </div>
              <div class="flex_zhuo">1-35桌</div>
            </a>
            <a href="#" class="store">格乐利雅婚礼艺术中心(徐汇店)</a>
            <div class="hotel_comment_box">
              <span class="hotel_comment_count">
                <span class="score">4.9分</span>
                <span>·20条点评</span>
              </span>
              <span class="hotel_kind">婚礼堂</span>
            </div>
            <div class="hotel_price">￥7980/桌起</div>
          </div>
        </div>
      </div>
      <!-- 四大金刚 -->
      <div class="KongKim w">
        <!-- 头部是复制粘贴过来的结构 -->
        <div class="card_header">
          <div class="card_header_left">
            <h2 class="title_h2">{{ city_name }}四大金刚</h2>
          </div>
        </div>
        <div class="group_content">
          <!-- 金刚1 -->
          <div class="content_list">
            <div class="group_head">
              <h3>司仪</h3>
              <a href="#">更多</a>
            </div>
            <div class="group_list">
              <div class="group_item">
                <a href="#">
                  <div>
                    <img
                      src="https://qnm.hunliji.com/FtBbei8Lk68parSKPP-Qj3T27S-I?imageView2/1/w/234/h/234"
                      alt=""
                    />
                  </div>
                </a>
                <div class="group_name"><a href="#">广宁</a></div>
                <div class="group_comment_box">
                  <span class="stars">
                    <ul>
                      <li></li>
                      <li></li>
                      <li></li>
                      <li></li>
                      <li></li>
                    </ul>
                  </span>
                  <span class="comment_num"><span>99</span>条</span>
                </div>
              </div>
              <div class="group_item">
                <a href="#">
                  <div>
                    <img
                      src="https://qnm.hunliji.com/FtBbei8Lk68parSKPP-Qj3T27S-I?imageView2/1/w/234/h/234"
                      alt=""
                    />
                  </div>
                </a>
                <div class="group_name"><a href="#">广宁</a></div>
                <div class="group_comment_box">
                  <span class="stars">
                    <ul>
                      <li></li>
                      <li></li>
                      <li></li>
                      <li></li>
                      <li></li>
                    </ul>
                  </span>
                  <span class="comment_num"><span>99</span>条</span>
                </div>
              </div>
              <div class="group_item">
                <a href="#">
                  <div>
                    <img
                      src="https://qnm.hunliji.com/FtBbei8Lk68parSKPP-Qj3T27S-I?imageView2/1/w/234/h/234"
                      alt=""
                    />
                  </div>
                </a>
                <div class="group_name"><a href="#">广宁</a></div>
                <div class="group_comment_box">
                  <span class="stars">
                    <ul>
                      <li></li>
                      <li></li>
                      <li></li>
                      <li></li>
                      <li></li>
                    </ul>
                  </span>
                  <span class="comment_num"><span>99</span>条</span>
                </div>
              </div>
              <div class="group_item">
                <a href="#">
                  <div>
                    <img
                      src="https://qnm.hunliji.com/FtBbei8Lk68parSKPP-Qj3T27S-I?imageView2/1/w/234/h/234"
                      alt=""
                    />
                  </div>
                </a>
                <div class="group_name"><a href="#">广宁</a></div>
                <div class="group_comment_box">
                  <span class="stars">
                    <ul>
                      <li></li>
                      <li></li>
                      <li></li>
                      <li></li>
                      <li></li>
                    </ul>
                  </span>
                  <span class="comment_num"><span>99</span>条</span>
                </div>
              </div>
            </div>
          </div>
          <!-- 金刚2 -->
          <div class="content_list">
            <div class="group_head">
              <h3>跟妆</h3>
              <a href="#">更多</a>
            </div>
            <div class="group_list">
              <div class="group_item">
                <a href="#">
                  <div>
                    <img
                      src="https://qnm.hunliji.com/FtBbei8Lk68parSKPP-Qj3T27S-I?imageView2/1/w/234/h/234"
                      alt=""
                    />
                  </div>
                </a>
                <div class="group_name"><a href="#">广宁</a></div>
                <div class="group_comment_box">
                  <span class="stars">
                    <ul>
                      <li></li>
                      <li></li>
                      <li></li>
                      <li></li>
                      <li></li>
                    </ul>
                  </span>
                  <span class="comment_num"><span>99</span>条</span>
                </div>
              </div>
              <div class="group_item">
                <a href="#">
                  <div>
                    <img
                      src="https://qnm.hunliji.com/FtBbei8Lk68parSKPP-Qj3T27S-I?imageView2/1/w/234/h/234"
                      alt=""
                    />
                  </div>
                </a>
                <div class="group_name"><a href="#">广宁</a></div>
                <div class="group_comment_box">
                  <span class="stars">
                    <ul>
                      <li></li>
                      <li></li>
                      <li></li>
                      <li></li>
                      <li></li>
                    </ul>
                  </span>
                  <span class="comment_num"><span>99</span>条</span>
                </div>
              </div>
              <div class="group_item">
                <a href="#">
                  <div>
                    <img
                      src="https://qnm.hunliji.com/FtBbei8Lk68parSKPP-Qj3T27S-I?imageView2/1/w/234/h/234"
                      alt=""
                    />
                  </div>
                </a>
                <div class="group_name"><a href="#">广宁</a></div>
                <div class="group_comment_box">
                  <span class="stars">
                    <ul>
                      <li></li>
                      <li></li>
                      <li></li>
                      <li></li>
                      <li></li>
                    </ul>
                  </span>
                  <span class="comment_num"><span>99</span>条</span>
                </div>
              </div>
              <div class="group_item">
                <a href="#">
                  <div>
                    <img
                      src="https://qnm.hunliji.com/FtBbei8Lk68parSKPP-Qj3T27S-I?imageView2/1/w/234/h/234"
                      alt=""
                    />
                  </div>
                </a>
                <div class="group_name"><a href="#">广宁</a></div>
                <div class="group_comment_box">
                  <span class="stars">
                    <ul>
                      <li></li>
                      <li></li>
                      <li></li>
                      <li></li>
                      <li></li>
                    </ul>
                  </span>
                  <span class="comment_num"><span>99</span>条</span>
                </div>
              </div>
            </div>
          </div>
          <!-- 金刚3 -->
          <div class="content_list">
            <div class="group_head">
              <h3>婚礼摄影</h3>
              <a href="#">更多</a>
            </div>
            <div class="group_list">
              <div class="group_item">
                <a href="#">
                  <div>
                    <img
                      src="https://qnm.hunliji.com/FtBbei8Lk68parSKPP-Qj3T27S-I?imageView2/1/w/234/h/234"
                      alt=""
                    />
                  </div>
                </a>
                <div class="group_name"><a href="#">广宁</a></div>
                <div class="group_comment_box">
                  <span class="stars">
                    <ul>
                      <li></li>
                      <li></li>
                      <li></li>
                      <li></li>
                      <li></li>
                    </ul>
                  </span>
                  <span class="comment_num"><span>99</span>条</span>
                </div>
              </div>
              <div class="group_item">
                <a href="#">
                  <div>
                    <img
                      src="https://qnm.hunliji.com/FtBbei8Lk68parSKPP-Qj3T27S-I?imageView2/1/w/234/h/234"
                      alt=""
                    />
                  </div>
                </a>
                <div class="group_name"><a href="#">广宁</a></div>
                <div class="group_comment_box">
                  <span class="stars">
                    <ul>
                      <li></li>
                      <li></li>
                      <li></li>
                      <li></li>
                      <li></li>
                    </ul>
                  </span>
                  <span class="comment_num"><span>99</span>条</span>
                </div>
              </div>
              <div class="group_item">
                <a href="#">
                  <div>
                    <img
                      src="https://qnm.hunliji.com/FtBbei8Lk68parSKPP-Qj3T27S-I?imageView2/1/w/234/h/234"
                      alt=""
                    />
                  </div>
                </a>
                <div class="group_name"><a href="#">广宁</a></div>
                <div class="group_comment_box">
                  <span class="stars">
                    <ul>
                      <li></li>
                      <li></li>
                      <li></li>
                      <li></li>
                      <li></li>
                    </ul>
                  </span>
                  <span class="comment_num"><span>99</span>条</span>
                </div>
              </div>
              <div class="group_item">
                <a href="#">
                  <div>
                    <img
                      src="https://qnm.hunliji.com/FtBbei8Lk68parSKPP-Qj3T27S-I?imageView2/1/w/234/h/234"
                      alt=""
                    />
                  </div>
                </a>
                <div class="group_name"><a href="#">广宁</a></div>
                <div class="group_comment_box">
                  <span class="stars">
                    <ul>
                      <li></li>
                      <li></li>
                      <li></li>
                      <li></li>
                      <li></li>
                    </ul>
                  </span>
                  <span class="comment_num"><span>99</span>条</span>
                </div>
              </div>
            </div>
          </div>
          <!-- 金刚4 -->
          <div class="content_list">
            <div class="group_head">
              <h3>婚礼跟拍</h3>
              <a href="#">更多</a>
            </div>
            <div class="group_list">
              <div class="group_item">
                <a href="#">
                  <div>
                    <img
                      src="https://qnm.hunliji.com/FtBbei8Lk68parSKPP-Qj3T27S-I?imageView2/1/w/234/h/234"
                      alt=""
                    />
                  </div>
                </a>
                <div class="group_name"><a href="#">广宁</a></div>
                <div class="group_comment_box">
                  <span class="stars">
                    <ul>
                      <li></li>
                      <li></li>
                      <li></li>
                      <li></li>
                      <li></li>
                    </ul>
                  </span>
                  <span class="comment_num"><span>99</span>条</span>
                </div>
              </div>
              <div class="group_item">
                <a href="#">
                  <div>
                    <img
                      src="https://qnm.hunliji.com/FtBbei8Lk68parSKPP-Qj3T27S-I?imageView2/1/w/234/h/234"
                      alt=""
                    />
                  </div>
                </a>
                <div class="group_name"><a href="#">广宁</a></div>
                <div class="group_comment_box">
                  <span class="stars">
                    <ul>
                      <li></li>
                      <li></li>
                      <li></li>
                      <li></li>
                      <li></li>
                    </ul>
                  </span>
                  <span class="comment_num"><span>99</span>条</span>
                </div>
              </div>
              <div class="group_item">
                <a href="#">
                  <div>
                    <img
                      src="https://qnm.hunliji.com/FtBbei8Lk68parSKPP-Qj3T27S-I?imageView2/1/w/234/h/234"
                      alt=""
                    />
                  </div>
                </a>
                <div class="group_name"><a href="#">广宁</a></div>
                <div class="group_comment_box">
                  <span class="stars">
                    <ul>
                      <li></li>
                      <li></li>
                      <li></li>
                      <li></li>
                      <li></li>
                    </ul>
                  </span>
                  <span class="comment_num"><span>99</span>条</span>
                </div>
              </div>
              <div class="group_item">
                <a href="#">
                  <div>
                    <img
                      src="https://qnm.hunliji.com/FtBbei8Lk68parSKPP-Qj3T27S-I?imageView2/1/w/234/h/234"
                      alt=""
                    />
                  </div>
                </a>
                <div class="group_name"><a href="#">广宁</a></div>
                <div class="group_comment_box">
                  <span class="stars">
                    <ul>
                      <li></li>
                      <li></li>
                      <li></li>
                      <li></li>
                      <li></li>
                    </ul>
                  </span>
                  <span class="comment_num"><span>99</span>条</span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- 婚纱礼服与婚戒首饰 -->
      <div class="dress_jewel w">
        <div class="dress">
          <div class="card_header">
            <div class="card_header_left">
              <h2 class="title_h2">{{ city_name }}婚纱礼服</h2>
            </div>
            <a href="#" class="a_more">更多</a>
          </div>
          <div class="hunpin_list">
            <div class="hunpin_item">
              <a href="#">
                <div>
                  <img
                    src="https://qnm.hunliji.com/9039482A3B83ADDC63CBAE32FE32D81E?imageView2/1/w/346/h/346"
                    alt=""
                  />
                </div>
              </a>
              <div class="group_name"><a href="#">钻石小鸟上海体验中心</a></div>
              <div class="group_comment_box">
                <span class="stars">
                  <ul>
                    <li></li>
                    <li></li>
                    <li></li>
                    <li></li>
                    <li></li>
                  </ul>
                </span>
                <span class="comment_num"><span>99</span>条</span>
              </div>
            </div>
            <div class="hunpin_item">
              <a href="#">
                <div>
                  <img
                    src="https://qnm.hunliji.com/9039482A3B83ADDC63CBAE32FE32D81E?imageView2/1/w/346/h/346"
                    alt=""
                  />
                </div>
              </a>
              <div class="group_name"><a href="#">广宁</a></div>
              <div class="group_comment_box">
                <span class="stars">
                  <ul>
                    <li></li>
                    <li></li>
                    <li></li>
                    <li></li>
                    <li></li>
                  </ul>
                </span>
                <span class="comment_num"><span>99</span>条</span>
              </div>
            </div>
            <div class="hunpin_item">
              <a href="#">
                <div>
                  <img
                    src="https://qnm.hunliji.com/9039482A3B83ADDC63CBAE32FE32D81E?imageView2/1/w/346/h/346"
                    alt=""
                  />
                </div>
              </a>
              <div class="group_name"><a href="#">广宁</a></div>
              <div class="group_comment_box">
                <span class="stars">
                  <ul>
                    <li></li>
                    <li></li>
                    <li></li>
                    <li></li>
                    <li></li>
                  </ul>
                </span>
                <span class="comment_num"><span>99</span>条</span>
              </div>
            </div>
          </div>
        </div>
        <div class="jewel">
          <div class="card_header">
            <div class="card_header_left">
              <h2 class="title_h2">{{ city_name }}婚戒首饰</h2>
            </div>
            <a href="#" class="a_more">更多</a>
          </div>
          <div class="hunpin_list">
            <div class="hunpin_item">
              <a href="#">
                <div>
                  <img
                    src="https://qnm.hunliji.com/9039482A3B83ADDC63CBAE32FE32D81E?imageView2/1/w/346/h/346"
                    alt=""
                  />
                </div>
              </a>
              <div class="group_name"><a href="#">钻石小鸟上海体验中心</a></div>
              <div class="group_comment_box">
                <span class="stars">
                  <ul>
                    <li></li>
                    <li></li>
                    <li></li>
                    <li></li>
                    <li></li>
                  </ul>
                </span>
                <span class="comment_num"><span>99</span>条</span>
              </div>
            </div>
            <div class="hunpin_item">
              <a href="#">
                <div>
                  <img
                    src="https://qnm.hunliji.com/9039482A3B83ADDC63CBAE32FE32D81E?imageView2/1/w/346/h/346"
                    alt=""
                  />
                </div>
              </a>
              <div class="group_name"><a href="#">广宁</a></div>
              <div class="group_comment_box">
                <span class="stars">
                  <ul>
                    <li></li>
                    <li></li>
                    <li></li>
                    <li></li>
                    <li></li>
                  </ul>
                </span>
                <span class="comment_num"><span>99</span>条</span>
              </div>
            </div>
            <div class="hunpin_item">
              <a href="#">
                <div>
                  <img
                    src="https://qnm.hunliji.com/9039482A3B83ADDC63CBAE32FE32D81E?imageView2/1/w/346/h/346"
                    alt=""
                  />
                </div>
              </a>
              <div class="group_name"><a href="#">广宁</a></div>
              <div class="group_comment_box">
                <span class="stars">
                  <ul>
                    <li></li>
                    <li></li>
                    <li></li>
                    <li></li>
                    <li></li>
                  </ul>
                </span>
                <span class="comment_num"><span>99</span>条</span>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- 周边城市 -->
      <div class="others w">周边城市:</div>
      <div class="city_list w">
        <ul>
          <li><a href="#">秦皇岛</a></li>
          <li><a href="#">秦皇岛</a></li>
          <li><a href="#">秦皇岛</a></li>
          <li><a href="#">秦皇岛</a></li>
          <li><a href="#">秦皇岛</a></li>
        </ul>
      </div>
      <!-- 省内其他城市 -->
      <div class="others w">省内其他城市:</div>
      <div class="city_list w">
        <ul>
          <li><a href="#">沈阳沈阳</a></li>
          <li><a href="#">沈阳沈阳</a></li>
          <li><a href="#">沈阳沈阳</a></li>
          <li><a href="#">沈阳沈阳</a></li>
          <li><a href="#">沈阳沈阳</a></li>
          <li><a href="#">沈阳沈阳</a></li>
          <li><a href="#">沈阳沈阳</a></li>
          <li><a href="#">沈阳沈阳</a></li>
          <li><a href="#">沈阳沈阳</a></li>
        </ul>
      </div>
    </div>
    <!-- 城市版婚礼纪首页结束 -->
    <my-footer></my-footer>
  </div>
</template>
<script>
export default {
  data() {
    return {
      city_name: "全国",
    };
  },
  mounted() {
    this.city_name = this.$store.state.city_name;
    // this.$nextTick(() => {
    // 原生DOM做的轮播图效果(偷天换日大法)
    // 定义一个变量i存放当前是哪一张图片以及应该设置ul的margin-left为多少
    var i = 0;
    // 常量LIWIDTH存放每张图片宽度
    var LIWIDTH = 754;
    // 常量DURATION存放轮播图片多久切换一次
    var DURATION = 500;
    // 常量LICOUNT存放图片数量(该页面暂时以2个图片为例)
    var LICOUNT = 2;
    // 获取轮播图容器ul以及轮播指示器的ul
    var ulImgs = document.querySelector(".content_center .slide>ul");
    var lis = document.querySelectorAll(".content_center .indicator li");
    // 封装一个函数moveTo()用于切换图片
    function moveTo(to) {
      // 当调用不传参数时默认在当前基础上加一即就是轮播下一张
      if (to == undefined) {
        to = i + 1;
      }
      // 当显示第一张图片时一定要判断时接下来用户要向左轮播还是向右
      if (i == 0) {
        // 如果向右轮播则加上过渡（不需要瞒天过海）
        if (to > i) {
          ulImgs.className = "transition";
          // 否则要去掉过渡(欺骗用户一下)
        } else {
          ulImgs.className = "";
          // 顺便瞬时移动到最后追加的那张图片(也就是第一张图片的副本图片)
          ulImgs.style.marginLeft = -LIWIDTH * LICOUNT + "px";
          // 在这用一个单次定时器为了将去掉过渡和切换图片隔离开，要不然程序执行太快过渡效果还是存在
          setTimeout(function () {
            moveTo(LICOUNT - 1);
          }, 100);
          return;
        }
      }
      // 这时候i就可以是我们处理过的to
      i = to;
      // 安全移动让轮播图动移动到指定位置
      ulImgs.style.marginLeft = -i * LIWIDTH + "px";
      // 遍历轮播指示器li让他们的li_active属性全部重置为空
      for (var li of lis) {
        li.className = "";
      }
      // 接下来如果到了最后一张图片重置i为0
      if (i == LICOUNT) {
        i = 0;
        //去掉过渡效果并返回到第一个页面
        setTimeout(function () {
          ulImgs.className = "";
          ulImgs.style.marginLeft = 0;
        }, DURATION);
      }
      // 将相应的轮播指示器点亮
      lis[i].className = "li_active";
    }
    // 至此封装完成了轮播函数moveTo()
    // 接下来来实现左右两个耳朵的轮播功能
    // 获取左右耳朵
    var btnleft = document.querySelector(".slide .left_ear");
    var btnright = document.querySelector(".slide .right_ear");
    var canClick = true;
    // 在moveTo()基础上封装洗呢函数move()
    function move(n) {
      if (canClick) {
        console.log(i + n);
        moveTo(i + n);
        // 下面四句代码是为了防止用户不断点击，多个效果叠加起来特别不友好
        canClick = false;
        setTimeout(function () {
          canClick = true;
        }, DURATION + 100);
      }
    }
    // 绑定事件
    btnright.onclick = function () {
      move(1);
    };
    btnleft.onclick = function () {
      move(-1);
    };
    // 下面我们让轮播图自动播起来
    // 定义轮播图自动播放的周期
    var interval = 3000;
    var timer = setInterval(function () {
      moveTo();
    }, interval);
    // 找到轮播容器的div
    var banner = document.querySelector(".content_center .slide");
    // 当鼠标悬停时停止轮播
    banner.onmouseover = function () {
      clearInterval(timer);
    };
    // 当鼠标离开时重启轮播
    banner.onmouseout = function () {
      timer = setInterval(function () {
        moveTo();
      }, interval);
    };
    //最后一步：为轮播指示器添加事件
    // 考虑到事件查询效率的问题将li的事件绑定在其父元素身上(虽然此处只有两个li，但是为以后li很多时着想，更多也是体现我们的一个优化思想)
    var indicator = document.querySelector(".slide .indicator");
    indicator.onclick = function (e) {
      //如果可以点击则继续执行下列逻辑】
      if (canClick) {
        var li = e.target;
        // 如果点的确实是li
        if (li.nodeName == "LI") {
          // 如果点击的指示器没有在轮播中则
          if (li.className !== "li_active") {
            // 利用for循环找到当前点击的指示器对应的i
            for (var i = 0; i < lis.length; i++) {
              if (lis[i] == li) {
                break;
              }
            }
            moveTo(i);
            // 下面的代码是为了不让用户段时间内多次触发指示器：和左右切换一个道理--规范用户行为
            canClick = false;
            setTimeout(function () {
              canClick = true;
            }, DURATION);
          }
        }
      }
    };
    // });
  },
};
</script>
<style scoped>
@import url(/css/city_index.css);
</style>
